var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, "dark", {
  renderer: "canvas",
  useDirtyRect: false,
});
var app = {};
var ROOT_PATH = "";
var option;

function loadScript(scriptUrl, cb) {
  var scriptTag = document.createElement("script");
  scriptTag.onload = cb;
  scriptTag.src = scriptUrl;
  document.body.appendChild(scriptTag);
}
loadScript(
  "https://fastly.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js",
  function () {
    // Reinit chart again
    // TODO: visual encoding registerion must been done before echarts.init.
    var dom = myChart.getDom();
    myChart.dispose();
    myChart = echarts.init(dom);
    $.getJSON(ROOT_PATH + "/data/index.json", function (data) {
      var nodes = data.nodes.map(function (nodeName, idx) {
        return {
          name: nodeName,
          value: Math.round(Math.random() * 100) || data.dependentsCount[idx],
        };
      });
      var edges = [];
      for (var i = 0; i < data.edges.length; i++) {
        var s = data.edges[i][0];
        var t = data.edges[i][1];
        edges.push({
          source: s,
          target: t,
        });
      }
      nodes.forEach(function (node) {
        // if (node.value > 100) {
        node.emphasis = {
          label: {
            show: true,
          },
        };
        node.label = {
          show: true,
        };
      });
      myChart.setOption({
        backgroundColor: "#303e3e",
        series: [
          {
            color: [
              "rgb(203,239,15)",
              "rgb(73,15,239)",
              "rgb(15,217,239)",
              "rgb(30,15,239)",
              "rgb(15,174,239)",
              "rgb(116,239,15)",
              "rgb(239,15,58)",
              "rgb(15,239,174)",
              "rgb(239,102,15)",
              "rgb(239,15,15)",
              "rgb(15,44,239)",
              "rgb(239,145,15)",
              "rgb(30,239,15)",
              "rgb(239,188,15)",
              "rgb(159,239,15)",
              "rgb(159,15,239)",
              "rgb(15,239,44)",
              "rgb(15,239,87)",
              "rgb(15,239,217)",
              "rgb(203,15,239)",
              "rgb(239,15,188)",
              "rgb(239,15,102)",
              "rgb(239,58,15)",
              "rgb(239,15,145)",
              "rgb(116,15,239)",
              "rgb(15,131,239)",
              "rgb(73,239,15)",
              "rgb(15,239,131)",
              "rgb(15,87,239)",
              "rgb(239,15,231)",
            ],
            type: "graphGL",
            nodes: nodes,
            edges: edges,
            // modularity: {
              // resolution: 2,
              // sort: true,
            // },
            lineStyle: {
              color: "rgba(255,255,255,1)",
              opacity: 1,
            },
            itemStyle: {
              opacity: 1,
              // borderColor: '#fff',
              // borderWidth: 1
            },
            focusNodeAdjacency: false,
            focusNodeAdjacencyOn: "click",
            symbolSize: function (value) {
              return Math.sqrt(value * 10);
            },
            label: {
              color: "#fff",
            },
            emphasis: {
              label: {
                show: false,
              },
              lineStyle: {
                opacity: 0.5,
                width: 4,
              },
            },
            forceAtlas2: {
              scaling: 200,
              steps: 5,
              // stopThreshold: 0,
              // jitterTolerence: 10,
              // edgeWeight: [0.2, 1],
              // gravity: 1,
              // edgeWeightInfluence: 0,
              // preventOverlap: true
            },
          },
        ],
      });
    });
  },
);

if (option && typeof option === "object") {
  myChart.setOption(option);
}

window.addEventListener("resize", myChart.resize);
